<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/list.css">
    <style>
        #template {
            display: none;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="box1">
        <div class="nav">
            <div class="nav1">
                <img src="img/1/1.1.png" alt="">
                <p>网络全案营销服务提供商</p>
            </div>
            <ul class="nav2">
                <li class="show">网站首页</li>
                <li>传说资源</li>
                <li>传悦案例</li>
                <li>传悦服务</li>
                <li>解决方案</li>
                <li>需求提交</li>
            </ul>
            <div class="nav3"><img src="img/1/1.2.png" alt=""></div>
        </div>
    </div>
    <!-- 大图   -->
    <div class="box2">
        <div>
            <p>网站首页&nbsp;>&nbsp;传阅案例</p>
        </div>
    </div>
    <!-- 内容 -->
    <div class="content">
        <ul class="content1">
            <li class="show">全部</li>
            <li>网站建设</li>
            <li>推广运营</li>
            <li>品牌策划</li>
            <li>网络全案</li>
        </ul>
        <ul class="content2">
            <li id="template">
                <img>
                <p></p>
                <span></span>
            </li>
        </ul>
        <div class="content3">
            <ul>
                <li>
                    <</li>
                        <li>1</li>
                        <li class="show">2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>></li>
            </ul>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="footer1">
            <img src="img/1/4.1.png" alt="">
            <div class="footer2">
                <ul>
                    <li>关于传说</li>
                    <li>新闻动态</li>
                    <li>传阅观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <p>Copyright 2013 创梦网络科技有限责任公司&nbsp;&nbsp;||&nbsp;&nbsp;传悦 Chnyoo.cn All Rights Reserved&nbsp;&nbsp;&nbsp;京ICP备12005221号</p>
            </div>
        </div>
    </div>

    <script src="./jquery.min.js">
    </script>
    <script>
        $.ajax({
            url: "http://127.0.0.1:81/select",
            success(data) {
                data.forEach(function(item) {
                    console.log(item);
                    var newli = $("#template").clone(true).attr("id", "")
                    newli.find("img").attr("src", item.src)
                    newli.find("p").html(item.title)
                    newli.find("span").html(item.word)
                    $(".content2").append(newli)
                })
            }
        })

        $("li").click(function() {
            location.href = "http://127.0.0.1:81/detail.html"
        })
    </script>
</body>

</html>